<template>
  <a-modal
    :title="this.title"
    :visible="this.visible"
    :width="620"
    @cancel="cancel"
    @ok="ok"
  >
    <a-form :form="form" layout="horizontal">
      <a-form-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="用户名"
      >
        <a-input v-decorator="this.validator.username" readOnly/>
      </a-form-item>
      <a-form-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="真实姓名"
      >
        <a-input v-decorator="this.validator.realname" />
      </a-form-item>
      <a-form-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="角色"
      >
        <a-select v-decorator="this.validator.role" mode= 'default' @change="getPermission">
          <a-select-option
            v-for="(item, key) of role"
            :value="item.id"
            :key="item.id"
          >{{item.roleName}}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="权限"
      >
        <a-tree-select
          v-decorator="this.validator.permissions"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="this.permissionData"
          allow-clear
          show-search
          style="width: 100%"
          tree-checkable
          tree-default-expand-all
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="区域权限"
      >
      <a-tree-select
          v-decorator="this.validator.areacode"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="this.treeData"
          allow-clear
          show-search
          style="width: 100%"
          tree-checkable
          tree-default-expand-all
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="安全等级"
      >
        <a-select v-decorator="this.validator.security">
          <a-select-option
            v-for="(item, key) of securL"
            :value="item.value"
            :key="item.key"
          >{{item.title}}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
  import aModal from "@/common/modal"
  import {GETALLROLELIST,REGIONTREE,ACTIVEUSER,PERMISSIONSTREE} from '@/../static/js/apis.js'
  import {userForm} from "@/../static/js/formValidators.js"
  export default {
    inject: ['reload'],                                 //注入App里的reload方法
    name: "userModal",
    props: ['title', 'visible'],
    components: {
      aModal
    },
    data() {
      return {
        form: this.$form.createForm(this),
        labelCol: {span: 5},
        wrapperCol: {span: 16},
        role:[],
        treeData:[],
        validator:userForm,
        permissionData:[],
        securL:
          [{
            "key":1,
            "value":1,
            "title":"专用"
          },{
            "key":2,
            "value":2,
            "title":"普通"
          }]
      }
    },
    methods: {
      getStaticData() {
        let self = this
        GETALLROLELIST('', function (res) {
          self.role = res.data
        })
         REGIONTREE('', function (res) {
          self.treeData = res.obj
        })
        PERMISSIONSTREE('',function(res){
          self.permissionData=res.data
        })
      },
      getPermission(value){
        let self = this
        // console.log(value)
        // console.log(this.validator)
        // console.log(this.validator.role)
        // console.log(this.permissionData)
        // console.log(self.permissionData)
        // console.log(value)
        // console.log(value)
        for(let k in self.permissionData){
          if(self.permissionData[k].value==value){
            self.form.setFieldsValue({
              permissions:self.permissionData[k].key
            })
          }
        }


      },
      ok(e) {
        let self = this;
        e.preventDefault();
          self.form.validateFields((err, values) => {
            if (!err) {
              console.log('Received values of form: ', values);
              ACTIVEUSER(values, function (res) {
                self.$message.success(res.message);
                self.reload()
              })
            }
          });
      },
      /*关闭modal*/
      cancel(e) {
        this.form.resetFields();
        this.$emit("cancel", e)
      },

    },
    created() {
      this.getStaticData()
    }
  }
</script>

<style scoped>

</style>
